<template>

  <!-- 注意: 带名字插槽叫做具名插槽 -->
  <div class="article-container">
    <h3 v-g_color="'red'">Article.vue组件</h3>
    <!-- 文章的标题 -->
    <div class="header-box">
      <slot name="title"></slot>
    </div>

    <!-- 文章的内容 -->
    <div class="content-box">
      <!-- 在封装组件时, 为预留的 <slot> 提供属性对应的值, 这种用法, 叫做"作用域插槽" -->
      <!-- 组件使用者 在使用作用域插槽时, 一般给属性设置形参名称为scope, 提示这个一个作用域插槽 -->
      <slot :user="userInfo" msg="hello vue.js" name="content"></slot>
    </div>

    <!-- 文章的作者 -->
    <div class="footer-box">
      <slot :ids="ids" baidu name="footer"></slot>
    </div>
  </div>
</template>

<script>
export default {
  // 首字母要大写
  name: 'Article',
  data () {
    return {
      // 用户的信息
      userInfo: {
        name: 'llhuang10',
        sex: 'man'
      },
      ids: [1, 2, 3, 4, 5,]
    }
  }
}
</script>

<style lang="less" scoped>

.article-container {

  margin: 20px 30px 30px;

  > div {
    width: 100%;
    min-height: 200px;
  }

  .header-box {
    background-color: pink;
  }

  .content-box {
    background-color: lightblue;
  }

  .footer-box {
    background-color: lightsalmon;
  }
}
</style>
